<template>
  <li class = "comments-item">
    <div class = "comments-avatar">
      <el-avatar :size = "35" :src = "logo" />
    </div>
    <div class = "comments-content">
      <div class = "comments-user">
        <span>用户名: &nbsp;</span>
        <span>1231231231231231232</span>
      </div>
      <div class = "comments-date">
        <span>2042年6月30日</span>
      </div>
    </div>
  </li>

</template>

<script setup>
import logo from '@/assets/logo.png'

</script>

<style lang = "less" scoped>
.comments-item {
  padding: 5px 0;
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: left;
  border-bottom: 1px solid #efefef;

  .comments-avatar {
    width: 35px;
  }

  .comments-content {
    padding-left: 10px;

    .comments-user {
      padding: 5px 0;

      span:nth-child(1) {
        font-size: 10px;
        color: blue;
      }

      span:nth-child(2) {
        font-size: 10px;
      }
    }

    .comments-date {
      span {
        font-size: 10px;
        color: #989696;
      }
    }
  }
}

</style>